<template>
  <div class="home">
    <van-search v-model="value" shape="round" background="aqua" placeholder="请输入搜索关键词" @focus="onFocus"/>
    <van-popup v-model="this.$store.state.popupShow" position="right" :style="{ height: '100vh', width:'90%' }">
      <sub-pop></sub-pop>
    </van-popup>
    <!-- <input type="text" v-model="value"> -->
  </div>
</template>

<script>
import SubPop from "@/components/SubPop/SubPop"
// vh   vw 分别是指视口高度和宽度：90vh相对屏幕高度90%
export default {
  name: "Home",
  data(){
    return{
      value:"",
      // show:true
    }
  },
  methods:{
    onFocus(){
      // 调用mutations中popupShowChange方法，来显示搜索框
      this.$store.commit("popupShowChange",true)
    }
  },
  computed:{
    // value:{
    //   get(){
    //     // 获取state中的值
    //     return this.$store.state.inputVal
    //   },
    //   set(newVal){
    //     // 调用mutations中的方法来改变state中的值
    //     this.$store.commit("inputValChange",newVal)
    //   }
    // }
  },
  components: {
    SubPop
  }
};
</script>
